* {
    padding: 0px;
    margin: 0px;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
.container {
    margin: 0 auto;
}
.row, .block {
    padding: 0px;
    margin: 0px;
}
.block {
    border: 1px solid #000;
    min-height: 60px;
    align-content: center;
    border-radius: 10px;
    flex: 1;
}
.block-2 {
    background-color: rgb(204, 216, 216);
}
.block-3 {
    border: 1px dashed #000000;
    background-color: rgb(126, 161, 161);
}
.block-4 {
    background-color: rgb(59, 91, 91);
}
.block-6 {
    flex: 2;
}
.up-front {
    order: -1;
}
.hide {
    display: none;
}
.modal__container {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.4);
}
.modal__content {
    background-color: #fefefe;
    margin: 100px auto; 
    padding: 20px;
    width: 30vw; 
    height: 30vh;
    font-size: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    animation-name: showModal;
    animation-duration: 0.5s;
}
.btn_close {
    color: #aaa;
    margin: -15px -10px 10px 20px;
    font-size: 18px;
    font-weight: bold;
    z-index: 2;
}
.btn_close:hover,
.btn_close:focus {
    color: rgb(232, 26, 26);
    text-decoration: none;
    cursor: pointer;
}

@keyframes showModal {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

@media (max-width: 400px) {
    .block {
        flex: 0 0 auto;
    }
}